<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
<!--    <script src="/js/jquery-3.4.1.min.js"></script>-->
    <script src="/images/jquery-2.1.3.js"></script>
    <style type="text/css">
        span{
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <center>
        <h3 style="margin: auto">用户注册</h3><br>
        <div style="color: red" id="divInfo"></div>
        <form id="form_data">
            <table style="border: 1px darkgoldenrod solid;margin: auto;width: 400px;height:500px;border-radius: 20px;background: bisque;font-size: 20px">
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="userName" id="userName" class="in" placeholder="请输入用户名">
                        <span id="user">用户名不能为空！</span>
                    </td>
                </tr>
                <tr>
                    <td>真实姓名：</td>
                    <td>
                        <input type="text" name="realName" id="realName" class="in" placeholder="请输入真实姓名">
                        <span id="real">真实姓名不能为空！</span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" name="passWord" id="passWord" class="in" placeholder="请输入密码">
                        <span id="pwd">密码不能为空！</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="注册" id="registerBtn">
                        <input type="button" value="返回登录" onclick="javascript:location.href='/html/login.html'">
                        <input type="reset">
                    </td>
                </tr>
            </table>
        </form>
    </center>

    <script type="text/javascript">
        $("#registerBtn").click(function () {
            let userName=$("#userName").val();
            let realName=$("#realName").val();
            let passWord=$("#passWord").val();
            if(userName.trim()==''){
                $("#user").css("display","block");
                return;
            }
            if(realName.trim()==''){
                $("#real").css("display","block");
                return;
            }
            if(passWord.trim()==''){
                $("#pwd").css("display","block");
                return;
            }
            let userJson = {"userName":userName,"realName":realName,"passWord":passWord};
            $.ajax({
                url:"/user/register",
                type:'post',
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(userJson),
                dataType:'json',
                success:function (data) {
                    if(data!=''&&data!=null){
                        if(data.code==200){
                            location.href="/html/login.html";
                        }else {
                            $("#divInfo").html("注册失败");
                        }
                    }
                },
                error:function () {
                    $("#divInfo").html("请求失败");
                }
            });
        });

        $(".in").focus(function () {
            $(this).next().css("display","none");
        });
    </script>
</body>
</html>